<template>
    <div>
        <div class="box">
            <el-col :span="15">
                <el-input type="text" placeholder="请输入员工工号作为检索关键字" v-model="keyword" maxlength="10"
                          show-word-limit></el-input>
            </el-col>
            <div>
                <el-button type="primary" round @click="searchTrain">查找</el-button>
                <el-button type="danger" round @click="addTrain">添加</el-button>
            </div>
        </div>
        <div>
            <el-table
                    :data="Train_tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand" label-width="120px">
                            <el-form-item label="职位">
                                <span>{{ props.row.stationName }}</span>
                            </el-form-item>
                            <el-form-item label="培训类型">
                                <span>{{ props.row.trainType }}</span>
                            </el-form-item>
                            <el-form-item label="培训地点">
                                <span>{{ props.row.trainSite }}</span>
                            </el-form-item>
                            <el-form-item label="培训课时">
                                <span>{{ props.row.trainHour}}</span>
                            </el-form-item>
                            <el-form-item label="培训内容">
                                <span>{{ props.row.trainContent }}</span>
                            </el-form-item>
                            <el-form-item label="培训成绩">
                                <span>{{ props.row.trainScore }}</span>
                            </el-form-item>
                            <el-form-item label="培训开始时间">
                                <span>{{ props.row.trainStart }}</span>
                            </el-form-item>
                            <el-form-item label="培训终止时间">
                                <span>{{ props.row.trainEnd }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="工号"
                        prop="workNumber">
                </el-table-column>
                <el-table-column
                        label="姓名"
                        prop="name">
                </el-table-column>
            </el-table>
        </div>
<!--        添加培训信息-->
        <el-dialog title="添加培训信息" :visible.sync="addDialogVisible" width="40%">
            <el-form label-width="80px"  :model="add_form" >
                <el-form-item label="工号">
                    <el-col :span="20">
                        <el-input placeholder="请输入员工工号" v-model="add_form.workNumber" maxlength="10"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="培训类型">
                    <el-col :span="20">
                        <el-input placeholder="请输入培训类型" v-model="add_form.trainType" maxlength="20"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="培训地点">
                    <el-col :span="20">
                        <el-input placeholder="请输入培训地点" v-model="add_form.trainSite" maxlength="20"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="培训课时">
                    <el-col :span="20">
                        <el-input placeholder="请输入培训课时" v-model="add_form.trainHour" maxlength="4"
                        show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="培训内容">
                    <el-col :span="20">
                        <el-input placeholder="请输入培训内容" v-model="add_form.trainContent" maxlength="100"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >
                <el-form-item label="培训成绩">
                    <el-col :span="20">
                        <el-input placeholder="请输入培训成绩" v-model="add_form.trainScore" maxlength="3"
                                  show-word-limit></el-input>
                    </el-col>
                </el-form-item >


                <el-form-item label="培训日期">
                    <el-date-picker
                            v-model="add_form.date_value"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="培训开始日期"
                            end-placeholder="培训终止日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add_new_Train">添 加</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                Train_tableData: [],
                addDialogVisible: false,
                keyword: '',
                add_form: {
                    workNumber: '',
                    trainType: '',
                    trainSite: '',
                    trainHour: '',
                    trainContent: '',
                    trainScore: '',
                    date_value: '',
                    // trainStart: '',
                    // trainEnd: ''
                }
            }
        },
        methods: {
            addTrain() {
                this.addDialogVisible = true
            },
            add_new_Train() {
                //添加的数据
                let data = {
                    "token": this.$store.state.token,
                    'workNumber': this.add_form.workNumber,
                    'trainType': this.add_form.trainType,
                    'trainSite': this.add_form.trainSite,
                    'trainHour': this.add_form.trainHour,
                    'trainContent': this.add_form.trainContent,
                    'trainScore': this.add_form.trainScore,
                    'trainStart': this.add_form.date_value[0],
                    'trainEnd': this.add_form.date_value[1]
                }
                console.log(data)
                this.$http.post('/addTrain', data).then( res => {
                    if (res.data.result == "success") {
                     this.$message.success("添加成功");
                      this.addDialogVisible = false
                    } else {
                        this.$message.error("没有权限");
                    }
                })
            },
            searchTrain() {
                if (this.keyword.length !== 10){
                    this.$message.error('输入工号不满足10位')
                    this.keyword = ''
                }
                else {
                    let data = {
                        "token": this.$store.state.token,
                        'workNumber': this.keyword
                    }
                    this.$http.post('/getTrainInfo', data).then( res => {
                        this.Train_tableData = res.data
                    })
                }

            },
            fetch() {
                let data = {
                    "token": this.$store.state.token,
                    'workNumber': null
                }
                this.$http.post('/getTrainInfo', data).then( res => {
                    this.Train_tableData = res.data
                })
            }
        },
        created() {
            this.fetch()
        }
    }
</script>

<style scoped>

</style>
